import React, { memo, useEffect } from "react";
import DragScaleProvider, {
  DragScaleData,
} from "../../framework/drag-scale/DragScaleProvider";
import eventOperateStore from "../operate-provider/EventOperateStore";
import { observer } from "mobx-react";
import canvasManager from "../header/items/canvas/CanvasManager";
import ScaleAction from "../../framework/core/ScaleAction";

export interface DesignerDragScaleContainerProps {
  children?: React.ReactNode;
  onDoubleClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  width?: number | string;
  height?: number | string;
  backgroundColor?: string;
  scaleData?: DragScaleData;
  id?: string;
  // 是否锁定
  lock?: boolean;
}

const DesignerDragScaleContainer = memo(
  observer((props: DesignerDragScaleContainerProps) => {
    const {
      children,
      onDoubleClick,
      width,
      backgroundColor,
      id,
      lock,
      height,
    } = props;
    const containerRef = React.useRef<HTMLDivElement>(null);
    const contentRef = React.useRef<HTMLDivElement>(null);
    const { canvasConfig } = canvasManager!;

    const setStorage = (content: string) => {
      if (id) localStorage.setItem(id?.toString(), content);
    };

    useEffect(() => {
      const container = containerRef.current;
      const content = contentRef.current;

      if (container && content) {
        const { setDsContentRef } = eventOperateStore;
        setDsContentRef(content);

        const { setScale, setRatio, rulerRef } = eventOperateStore;
        if (lock) {
          setTimeout(() => {
            let _transform = localStorage.getItem(id ?? "");
            if (_transform) {
              content.style.setProperty("transform", _transform);
            }
          }, 50);
          return;
        }
        const dragScaleProvider = new DragScaleProvider({
          container,
          content,
          scaleCallback: (dsData) => {
            const { scale, ratio } = dsData;
            setScale(scale);
            setRatio(ratio);
            rulerRef?.ruleWheel();
            ScaleAction.doScale(dsData.scale, dsData.scale);
            setStorage(content.style.getPropertyValue("transform"));
          },
          dragCallback: () => {
            const { rulerRef } = eventOperateStore;
            rulerRef?.ruleDrag();
          },
          dragEndCallback: () => {
            setStorage(content.style.getPropertyValue("transform"));
          },
        });
        let _transform = localStorage.getItem(id ?? "");
        if (_transform) {
          content.style.setProperty("transform", _transform);
        }
        return () => {
          dragScaleProvider.destroy();
        };
      }
    }, [id, lock, height, width]);
    return (
      <div
        className={"designer-ds-container"}
        id="designer-ds-container"
        ref={containerRef}
        style={{
          overflow: "hidden",
          height: height ?? window.innerHeight - 110,
          width: width ?? window.innerWidth - 115,
          backgroundColor: backgroundColor ?? "#434343",
          position: "relative",
        }}
      >
        <div
          className={"designer-ds-content lc-drag-scale-provider"}
          id={"designer-ds-content"}
          ref={contentRef}
          onDoubleClick={onDoubleClick}
          style={{
            width: canvasConfig?.width,
            height: canvasConfig?.height,
            background: backgroundColor ?? "#1c1c1c",
            position: "absolute",
          }}
        >
          {children}
        </div>
      </div>
    );
  })
);

export default DesignerDragScaleContainer;
